import React, { useEffect, useState, useLayoutEffect, useRef } from "react";
import { DownOutlined, ShoppingFilled, TagFilled, CopyOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import CommonParagraph from "@/components/CommonParagraph";
import {
	Button,
	// Select,
	// Input,
	DatePicker,
	Dropdown,
	Menu,
	Space,
	Popover,
	Image,
	Typography,
	Form,
	InputNumber,
	message,
	Tooltip
} from "antd";
import { Input, Select } from "@/views/components/PrefixPlaceholder";
import CommonZjfImg from "@/views/components/CommonZjfImg";
import CommonImg from "@/views/components/CommonImg";
import { NumText } from "@/pages/OrderModule/common/components/CommonText";
import BtnGroup from "@/views/components/BtnGroup";
import GoodsPopoverContent from "./components/GoodsPopoverContent";
import Iconfont from "@/components/IconFont";
import Style from "./components/index.module.less";
import {
	getArrayItem,
	getLabelByValue,
	SPU_STATUS,
	SPU_SYNC_STATUS,
	SPU_SYNC_TYPE_STATUS,
	SPU_PRICE_TYPE,
	SPU_OTHER_ATTR,
	YES_NO_NUM_STATUS,
	SKU_RUNNING_VOLUME_STATUS,
	SKU_RETURN_DIRECTION_STATUS,
	SKU_MATCHORNOT_STATUS,
	SPU_MATCHORNOT_STATUS
} from "@/views/utils/constant";
import moment from "moment";
import { getInfoGoodsSpu } from "./service";
import { render } from "less";
const { RangePicker } = DatePicker;
const { Text } = Typography;
const dateFormat = "YYYY-MM-DD HH:mm:ss";
export default ({ handle, dialog, setDialog, modalProps, DialogEnum, onCancel, handleEditRow, RefDataList, RefOriginalData }) => {
	const navigate = useNavigate();
	const [tabValue, setTabValue] = useState("sku");
	const [isSkuType, setIsSkuType] = useState(true);
	// const [isEdit, setIsEdit] = useState(-1);

	const returnDestinationMatch = {
		1: '销退入库',
		2: '退回供应商',
	}

	const renderAction = record => {
		return (
			<div className="flex" style={{ alignItems: "center" }}>
				<Button
					type="link"
					onClick={e => {
						e.stopPropagation();
						handle.edit(record, isSkuType);
					}}
				>
					编辑
				</Button>
				<Dropdown
					trigger="hover"
					onClick={e => {
						e.stopPropagation();
					}}
					overlay={
						<Menu>
							{!isSkuType ? (
								<>
									<Menu.Item
										key="1"
										onClick={e => {
											handle.matchGoods({
												defaultTab: "智能匹配",
												data: [{ spuId: record.id, spuImage: record.image, spuName: record.spuName }],
												isSkuType
											});
										}}
									>
										智能匹配
									</Menu.Item>
									<Menu.Item
										key="2"
										onClick={e => {
											handle.matchGoods({
												defaultTab: "高级匹配",
												data: [{ spuId: record.id, spuImage: record.image, spuName: record.spuName }],
												isSkuType
											});
										}}
									>
										高级匹配
									</Menu.Item>
									<Menu.Item
										key="3"
										onClick={e => {
											handle.matchGoods({
												defaultTab: "供应商匹配",
												data: [{ ...record, spuId: record.id, spuImage: record.image, spuName: record.spuName }],
												isSkuType
											});
										}}
									>
										供应商匹配
									</Menu.Item>
									<Menu.Item
										onClick={e => {
											handle.copy(record);
										}}
									>
										复制
									</Menu.Item>
								</>
							) : (
								<>
									<Menu.Item
										key="1"
										onClick={() => {
											navigate("/views/goods/shop?skuCode=" + record.skuCode);
										}}
									>
										查看店铺商品
									</Menu.Item>
									<Menu.Item
										key="2"
										onClick={e => {
											handle.historyPrice("成本价", record);
										}}
									>
										查看历史成本价
									</Menu.Item>
									<Menu.Item
										key="3"
										onClick={e => {
											// e.domEvent.target.innerText
											handle.historyPrice("采购价", record);
										}}
									>
										查看历史采购价
									</Menu.Item>
									<Menu.Item
										key="4"
										//跑量商品不能使用供应商匹配和精准匹配
										disabled={record.runningVolumeStatus == 2}
										onClick={e => {
											handle.matchGoods({ defaultTab: "精准匹配", data: [{ ...record, skuId: record.id }], isSkuType });
										}}
									>
										精准匹配
									</Menu.Item>
									<Menu.Item
										key="5"
										//跑量商品不能使用供应商匹配和精准匹配
										disabled={record.runningVolumeStatus == 2}
										onClick={e => {
											handle.matchGoods({
												defaultTab: "供应商匹配",
												data: [{ ...record, skuId: record.id }],
												isSkuType
											});
										}}
									>
										供应商匹配
									</Menu.Item>
									<Menu.Item
										key="7"
										onClick={e => {
											handle.matchGoods({
												defaultTab: "单个商品的智能匹配",
												data: [{ ...record, skuId: record.id }],
												isSkuType
											});
										}}
									>
										智能匹配
									</Menu.Item>
									<Menu.Item
										key="6"
										onClick={e => {
											handle.returnDirection({ selectedRows: [record] });
										}}
									>
										退货去向
									</Menu.Item>
								</>
							)}
						</Menu>
					}
				>
					<Button type="link">
						更多
						<DownOutlined />
					</Button>
					{/* <a onClick={e => e.preventDefault()}>
						<Space>
							更多
							<DownOutlined />
						</Space>
					</a> */}
				</Dropdown>
			</div>
		);
	};
	// 行编辑需要的的数据
	const stopPropagationFn = e => {
		e.stopPropagation();
	};
	const CopyDiv = ({ value }) => {
		const [hovered, setHovered] = useState(false);

		const handleMouseEnter = () => {
			setHovered(true);
		};

		const handleMouseLeave = () => {
			setHovered(false);
		};
		//点击复制
		async function copyText(textToCopy) {
			// navigator clipboard 需要https等安全上下文
			if (navigator.clipboard && window.isSecureContext) {
				// navigator clipboard 向剪贴板写文本
				await navigator.clipboard
					.writeText(textToCopy)
					.then(() => {
						message.success("复制成功！");
					})
					.catch(() => {
						message.warning("复制失败");
					});
			} else {
				// 创建text area
				let textArea = document.createElement("textarea");
				textArea.value = textToCopy;
				// 使text area不在viewport，同时设置不可见
				textArea.style.position = "absolute";
				textArea.style.opacity = 0;
				textArea.style.left = "-999999px";
				textArea.style.top = "-999999px";
				document.body.appendChild(textArea);
				textArea.focus();
				textArea.select();
				return new Promise((res, rej) => {
					// 执行复制命令并移除文本框
					document.execCommand("copy") ? res() : rej();
					textArea.remove();
				})
					.then(() => {
						message.success("复制成功！");
					})
					.catch(() => {
						message.warning("复制失败");
					});
			}
		}
		return (
			<div
				className={Style.copy}
				style={{ cursor: "pointer" }}
				onMouseEnter={handleMouseEnter}
				onMouseLeave={handleMouseLeave}
				// onClick={e => {
				// 	handleEditRow(e, {}, index, { list: RefDataList.current, originalData: RefOriginalData.current });
				// }}
			>
				<div>{value}</div>
				{hovered && (
					<Tooltip title="复制">
						<CopyOutlined
							key="copy-icon"
							onClick={() => {
								copyText(value);
							}}
						/>
					</Tooltip>
				)}
			</div>
		);
	};
	const defaultColumns = ({ isSkuType }) => {
		return [
			{
				tabs: ["spu", "sku"],
				hidden: true,
				// 按款式/按SKU：点击后，所有当前页面的查询条件、列表数据切换至SPU/SKU维度展示。
				search: {
					content: () => (
						<BtnGroup
							value={tabValue}
							onChange={value => {
								setTabValue(value);
							}}
							options={[
								{
									label: "按款式",
									value: "spu",
									icon: <ShoppingFilled className="mr4" />
								},
								{
									label: "SKU",
									value: "sku",
									icon: <TagFilled className="mr4" />
								}
							]}
						/>
					)
				}
			},
			{
				tabs: ["sku", "spu"],
				name: "序号",
				code: "index",
				render: (t, r, i) => i + 1,
				lock: true,
				width: 60
			},
			{
				tabs: ["sku", "spu"],
				name: "图片",
				code: "image",
				width: 60,
				render: (value, record) => <CommonImg width={32} height={32} src={value} />,
				search: isSkuType
					? {
							order: 120,
							code: "imageType",
							content: () => (
								<Select placeholder="商品图片">
									<Option value={1}>有商品图片</Option>
									<Option value={2}>无商品图片</Option>
								</Select>
							)
						}
					: undefined
			},
			{
				tabs: ["sku", "spu"],
				name: "商品名称",
				code: isSkuType ? "skuName" : "spuName",
				searchCode: "skuNameOrCode",
				width: 300,
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<Input
							defaultValue={value}
							origin="true"
							// showCount maxLength={100}
							placeholder=""
							autoComplete="off"
							className={Style.border}
							onClick={stopPropagationFn}
							onBlur={e => {
								const editData = {
									[isSkuType ? "skuName" : "spuName"]: e.target.value
								};
								handleEditRow(e, editData, index, { list: RefDataList.current, originalData: RefOriginalData.current });
							}}
						/>
					) : (
						value
					);
				},
				search: { order: 30, content: () => <Input placeholder="商品名称" /> }
			},
			{
				tabs: ["sku", "spu"],
				name: "款式编码",
				code: "spuCode",
				width: 160,
				render: (value, record, index) => <CopyDiv value={value} />,
				search: { order: 10, content: () => <Input placeholder="款式编码" /> }
			},
			{
				tabs: ["sku", "spu"],
				name: "商品编码",
				code: "skuCode",
				hidden: !isSkuType,
				width: 160,
				render: (value, record, index) => <CopyDiv value={value} />,
				search: { order: 20, content: () => <Input placeholder="商品编码" /> }
			},
			{
				tabs: ["sku", "spu"],
				name: "商品简称",
				code: isSkuType ? "skuAbbreviation" : "spuAbbreviation",
				width: 180,
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<Input
							defaultValue={value}
							origin="true"
							// showCount
							// maxLength={40}
							placeholder=""
							autoComplete="off"
							className={Style.border}
							style={{ width: "100%" }}
							onClick={stopPropagationFn}
							onBlur={e => {
								const editData = {
									[isSkuType ? "skuAbbreviation" : "spuAbbreviation"]: e.target.value
								};
								handleEditRow(e, editData, index, { list: RefDataList.current, originalData: RefOriginalData.current });
							}}
						/>
					) : (
						value
					);
				},
				search: { order: 40, content: () => <Input placeholder="商品简称" /> }
			},
			{
				tabs: ["spu"],
				name: "匹配状态",
				code: "matchOrNot",
				width: 160,
				render: value => getLabelByValue(SPU_MATCHORNOT_STATUS, value),
				search: {
					order: 5,
					code: "matchOrNot",
					content: () => <Select options={SPU_MATCHORNOT_STATUS} placeholder="是否匹配" />
				}
			},

			{
				tabs: ["sku", "spu"],
				name: "颜色",
				code: "colour",
				hidden: !isSkuType,
				width: 180,
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<Input
							defaultValue={value}
							origin="true"
							// showCount
							// maxLength={100}
							placeholder=""
							autoComplete="off"
							className={Style.border}
							style={{ width: "100%" }}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										colour: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						value
					);
				},
				search: { order: 50, code: "colorSpecifications", content: () => <Input placeholder="颜色及尺码" /> }
			},
			{
				tabs: ["sku", "spu"],
				name: "尺码",
				code: "specs",
				width: 180,
				hidden: !isSkuType,
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<Input
							defaultValue={value}
							origin="true"
							// showCount
							// maxLength={100}
							placeholder=""
							autoComplete="off"
							className={Style.border}
							style={{ width: "100%" }}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										specs: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						value
					);
				}
			},
			{
				tabs: ["sku", "spu"],
				name: "零售价（元）",
				code: "retailPrice",
				align: "center",
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<InputNumber
							defaultValue={value}
							placeholder=""
							min={0}
							precision={2}
							controls={false}
							style={{ width: "100%" }}
							className={Style.border}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										retailPrice: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						<span className="not-red">{value && `￥${Number(value).toFixed(2)}`}</span>
					);
				},

				search: {
					span: 3,
					order: 160,
					content: () => (
						<Input.Group compact style={{ display: "flex" }}>
							<Form.Item name="priceType" noStyle>
								<Select
									origin="true"
									placeholder="选择价格"
									options={
										isSkuType ? SPU_PRICE_TYPE : SPU_PRICE_TYPE.filter(e => ["零售价", "市场价", "成本价"].includes(e.label))
									}
									style={{
										flex: 1
									}}
								/>
							</Form.Item>
							<Form.Item name="minPrice" style={{ textAlign: "center", flex: 1, marginBottom: 0 }}>
								<InputNumber
									min={0}
									placeholder="最小值"
									style={{
										textAlign: "center",
										flex: 1
									}}
								/>
							</Form.Item>
							<Iconfont type="iconxiangyoujiaohuan" className="input-middle-icon" />
							<Form.Item name="maxPrice" style={{ textAlign: "center", flex: 1, marginBottom: 0 }}>
								<InputNumber
									min={0}
									placeholder="最大值"
									style={{
										textAlign: "center",
										flex: 1
									}}
								/>
							</Form.Item>
						</Input.Group>
					)
				}
			},
			{
				tabs: ["sku"],
				name: "采购价（元）",
				code: "purchasePrice",
				align: "center",
				render: v => <span className="not-red">{v && `￥${Number(v).toFixed(2)}`}</span>
			},
			{
				tabs: ["sku"],
				name: "商城价（元）",
				code: "mallPrice",
				align: "center",
				render: v => <span className="not-red">{v && `￥${Number(v).toFixed(2)}`}</span>
			},
			{
				tabs: ["sku"],
				name: "会员价（元）",
				code: "memberPrice",
				align: "center",
				render: v => <span className="not-red">{v && `￥${Number(v).toFixed(2)}`}</span>
			},
			{
				tabs: ["sku", "spu"],
				name: "成本价（元）",
				code: "costPrice",
				align: "center",
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<InputNumber
							defaultValue={value}
							placeholder=""
							min={0}
							precision={2}
							controls={false}
							className={Style.border}
							style={{ width: "100%" }}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										costPrice: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						<span className="not-red">{value && `￥${Number(value).toFixed(2)}`}</span>
					);
				}
			},
			{
				tabs: ["sku", "spu"],
				name: "市场价|吊牌价（元）",
				code: "tagPrice",
				width: 160,
				align: "center",
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<InputNumber
							defaultValue={value}
							placeholder=""
							min={0}
							precision={2}
							controls={false}
							className={Style.border}
							style={{ width: "100%" }}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										tagPrice: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						<span className="not-red">{value && `￥${Number(value).toFixed(2)}`}</span>
					);
				}
			},
			{ tabs: ["sku", "spu"], name: "可用库存", code: "availableInventory" },
			{
				tabs: ["sku", "spu"],
				name: "虚拟库存",
				code: "virtualInventory",
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<InputNumber
							defaultValue={value}
							placeholder=""
							min={0}
							precision={0}
							controls={false}
							className={Style.border}
							style={{ width: "100%" }}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										virtualInventory: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						value
					);
				}
			},
			{
				tabs: ["sku", "spu"],
				name: "库存同步状态",
				code: "isSyncInventory",
				width: 150,
				render: (value, record) =>
					value !== undefined && (
						<>
							{getArrayItem(SPU_SYNC_STATUS, value).label}
							{value && isSkuType ? `（${isSkuType && getArrayItem(SPU_SYNC_TYPE_STATUS, record.syncType).label}）` : <></>}
						</>
					),
				search: isSkuType
					? {
							order: 100,
							content: () => <Select options={SPU_SYNC_STATUS} placeholder="库存同步状态" />
						}
					: undefined
			},
			{
				tabs: ["sku", "spu"],
				name: "重量(kg)",
				code: "weight",
				width: 90,
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<InputNumber
							defaultValue={value}
							placeholder=""
							min={0}
							precision={2}
							controls={false}
							className={Style.border}
							style={{ width: "100%" }}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										weight: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						<>{value && value + "kg"}</>
					);
				},
				search: {
					span: 6,
					order: 90,
					content: () => (
						<Input.Group compact className={Style.InputGroup} style={{ display: "flex" }}>
							{/* <div> */}
							<Input
								origin="true"
								style={{
									width: 70,
									borderLeft: 0,
									borderRight: 0,
									pointerEvents: "none"
								}}
								placeholder="重量范围"
								disabled
							/>
							<Form.Item name="startWeight" style={{ textAlign: "center", flex: 1, marginBottom: 0 }}>
								<Input placeholder="" addonAfter="kg" />
							</Form.Item>
							<Iconfont type="iconxiangyoujiaohuan" className="input-middle-icon" />
							<Form.Item
								name="endWeight"
								style={{
									textAlign: "center",
									flex: 1,
									marginBottom: 0
								}}
							>
								<Input className="site-input-right" addonAfter="kg" />
							</Form.Item>

							{/* </div> */}
						</Input.Group>
					)
				}
			},
			// {
			// 	tabs: ["sku", "spu"],
			// 	name: "状态",
			// 	code: "status",
			// 	render: value => (
			// 		<Text key={value} type={getArrayItem(SPU_STATUS, value)?.type}>
			// 			{getArrayItem(SPU_STATUS, value)?.label}
			// 		</Text>
			// 	),
			// 	search: {
			// 		order: 110,
			// 		content: () => (
			// 			<Select
			// 				options={[
			// 					...SPU_STATUS,
			// 					{
			// 						label: "全部",
			// 						value: null
			// 					}
			// 				]}
			// 				placeholder="商品状态"
			// 			></Select>
			// 		)
			// 	}
			// },
			{
				tabs: ["sku"],
				name: "其他价格1",
				code: "price1",
				align: "center",
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<InputNumber
							defaultValue={value}
							placeholder=""
							min={0}
							precision={2}
							controls={false}
							className={Style.border}
							style={{ width: "100%" }}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										price1: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						<span className="not-red">{value && `￥${Number(value).toFixed(2)}`}</span>
					);
				}
			},
			{
				tabs: ["sku"],
				name: "其他价格2",
				code: "price2",
				align: "center",
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<InputNumber
							defaultValue={value}
							placeholder=""
							min={0}
							precision={2}
							controls={false}
							className={Style.border}
							style={{ width: "100%" }}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										price2: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						<span className="not-red">{value && `￥${Number(value).toFixed(2)}`}</span>
					);
				}
			},
			{
				tabs: ["sku"],
				name: "其他价格3",
				code: "price3",
				align: "center",
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<InputNumber
							defaultValue={value}
							placeholder=""
							min={0}
							precision={2}
							controls={false}
							className={Style.border}
							style={{ width: "100%" }}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										price3: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						<span className="not-red">{value && `￥${Number(value).toFixed(2)}`}</span>
					);
				}
			},
			{
				tabs: ["sku"],
				name: "其他属性1",
				code: "attribute1",
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<Input
							defaultValue={value}
							origin="true"
							placeholder=""
							autoComplete="off"
							className={Style.border}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										attribute1: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						value
					);
				},
				search: {
					span: 3,
					order: 170,

					group: [
						{
							span: 12,
							code: "attributeType",
							content: () => (
								<Select origin="true" options={SPU_OTHER_ATTR} placeholder="其他属性" className="right-no-radius width-full" />
							)
						},
						{
							span: 12,
							code: "attribute",
							content: () => <Input placeholder="" autoComplete="off" className="left-no-radius" />
						}
					]
				}
			},
			{
				tabs: ["sku"],
				name: "其他属性2",
				code: "attribute2",
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<Input
							defaultValue={value}
							origin="true"
							placeholder=""
							autoComplete="off"
							className={Style.border}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										attribute2: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						value
					);
				}
			},
			{
				tabs: ["sku"],
				name: "其他属性3",
				code: "attribute3",
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<Input
							defaultValue={value}
							origin="true"
							placeholder=""
							autoComplete="off"
							className={Style.border}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										attribute3: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						value
					);
				}
			},
			{
				tabs: ["sku", "spu"],
				name: "商品成分",
				code: "productIngredients",
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<Input
							defaultValue={value}
							origin="true"
							placeholder=""
							autoComplete="off"
							className={Style.border}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										productIngredients: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						value
					);
				}
			},
			{
				tabs: ["sku"],
				name: "自定义属性",
				code: "customAttribute",
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<Input
							defaultValue={value}
							origin="true"
							placeholder=""
							autoComplete="off"
							className={Style.border}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										customAttribute: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						value
					);
				}
			},
			{
				tabs: ["sku"],
				name: "商品备注",
				code: "note",
				render: (value, record, index) => {
					return record.isEdit && isSkuType ? (
						<Input
							defaultValue={value}
							origin="true"
							placeholder=""
							autoComplete="off"
							className={Style.border}
							onClick={stopPropagationFn}
							onBlur={e => {
								handleEditRow(
									e,
									{
										note: e.target.value
									},
									index,
									{ list: RefDataList.current, originalData: RefOriginalData.current }
								);
							}}
						/>
					) : (
						<div
							style={{ cursor: "pointer", width: "100%", height: "100%" }}
							onClick={e => {
								e.stopPropagation();
								handleEditRow(e, {}, index, { list: RefDataList.current, originalData: RefOriginalData.current });
							}}
						>
							{value || " "}
						</div>
					);
				}
			},
			{
				tabs: ["sku"],
				name: "是否为跑量商品",
				code: "runningVolumeStatus",
				width: 125,
				render: value => (
					<Text type={getArrayItem(SKU_RUNNING_VOLUME_STATUS, value)?.type}>
						{getArrayItem(SKU_RUNNING_VOLUME_STATUS, value)?.label}
					</Text>
				),
				search: {
					order: 150,
					content: () => <Select options={YES_NO_NUM_STATUS} placeholder="是否为跑量商品" />
				}
			},

			{
				tabs: ["sku", "spu"],
				name: "创建时间",
				code: "createTime",
				width: 180,
				search: {
					order: 180,
					span: 6,
					group: [
						{
							span: 6,
							code: "dateType",
							content: () => (
								<Select origin="true" placeholder="选择日期" allowClear className="right-no-radius width-full">
									<Option value={1}>修改日期</Option>
									<Option value={2}>创建日期</Option>
									{isSkuType && <Option value={3}>最后同步日期</Option>}
								</Select>
							)
						},
						{
							keys: ["startTime", "endTime"],
							span: 18,
							code: "time",
							content: () => <RangePicker format={dateFormat} showTime className="left-no-radius" />
						}
					]
				}
			},
			{
				tabs: ["sku", "spu"],
				name: "最后修改时间",
				code: "updateTime",
				width: 180
			},
			{
				tabs: ["sku"],
				name: "商品匹配",
				code: "goodsSkuMatches",
				width: 400,
				render: (_, record) => {
					return (
						<Popover
							content={
								<GoodsPopoverContent
									record={{ ...record, skuId: record.id }}
									list={record.goodsSkuMatches || []}
									memberPrice={record.memberPrice || 0}
									handle={handle}
								/>
							}
						>
							{(record.goodsSkuMatches || []).map((item, i) => {
								return (
									<p key={i + item.id} style={{ lineHeight: "16px" }}>
										{item.supplierName}
										{item.supplierSkuId && "*" + item.supplierSkuId}
										{item.supplierSkuName && "*" + item.supplierSkuName}
										{/* {item.supplierSkuCode && "*" + item.supplierSkuCode} */}
										{item.isDefault ? "（默认）" : null}
									</p>
								);
							})}
						</Popover>
						// <GoodsPopoverContent list={record.goodsSkuMatches || []} />
					);
				}
			},
			{
				tabs: ["sku"],
				name: "供应商商品图片",
				code: "supplierSkuImage",
				width: 130,
				render: (_, record) => {
					return <CommonZjfImg img={record.supplierSkuImage} storeId={record.supplierId} size={""} />;
				}
			},
			{
				tabs: ["sku"],
				hidden: true,
				name: "供应商名称",
				code: "supplierName",
				width: 160,
				search: { order: 60, content: () => <Input placeholder="供应商名称" /> }
			},
			{
				tabs: ["sku"],
				hidden: true,
				name: "供应商款式编码",
				code: "supplierSpuCode",
				width: 160,
				search: { order: 70, content: () => <Input placeholder="供应商款式编码" /> }
			},
			{
				tabs: ["sku"],
				name: "供应商商品名称",
				code: "supplierSkuName",
				width: 130,
				search: { order: 80, code: "supplierSkuCode", content: () => <Input placeholder="供应商商品编码" /> }
			},
			{ tabs: ["sku"], name: "供应商颜色尺码", code: "supplierSkuSpecs", width: 160 },
			{
				tabs: ["sku"],
				hidden: true,
				name: "是否仅匹配供应商",
				code: "isMatch",
				render: value => (
					<Text type={getArrayItem(YES_NO_NUM_STATUS, value)?.type}>{getArrayItem(YES_NO_NUM_STATUS, value)?.label}</Text>
				),
				search: {
					order: 130,
					content: () => <Select options={YES_NO_NUM_STATUS} placeholder="是否仅匹配供应商" />
				}
			},
			{
				tabs: ["sku"],
				hidden: true,
				name: "是否多个商品匹配",
				code: "isManyGoods",
				render: value => (
					<Text type={getArrayItem(YES_NO_NUM_STATUS, value)?.type}>{getArrayItem(YES_NO_NUM_STATUS, value)?.label}</Text>
				),
				search: {
					order: 140,
					content: () => <Select options={YES_NO_NUM_STATUS} placeholder="是否多个商品匹配" />
				}
			},
			{
				tabs: ["sku"],
				name: "退货去向",
				code: "returnDestination",
				width: 160,
				render: (value, record) => <>{value ? returnDestinationMatch[value] : ''}</>,
				search: { order: 155, content: () => <Select options={SKU_RETURN_DIRECTION_STATUS} placeholder={"退货去向"} /> }
			},
			{
				tabs: ["sku"],
				name: "是否匹配",
				code: "matchOrNot",
				hidden: true,
				search: {
					order: 5,
					code: "matchOrNot",
					content: () => <Select options={SKU_MATCHORNOT_STATUS} placeholder="是否匹配" />
				}
			},
			{
				tabs: ["sku", "spu"],
				lock: true,
				width: 130,
				name: "操作",
				align: "center",
				code: "action",
				render: (_, record) => renderAction(record)
			}
		];
	};

	const skuColumns = () => {
		return defaultColumns({ isSkuType }).filter(e => e.tabs.includes("sku"));
	};
	const spuColumns = () => {
		return defaultColumns({ isSkuType }).filter(e => e.tabs.includes("spu"));
	};

	const [columns, setColumns] = useState(skuColumns());
	useLayoutEffect(() => {
		setIsSkuType(tabValue === "sku");
	}, [tabValue]);

	useLayoutEffect(() => {
		setColumns(tabValue == "sku" ? skuColumns() : spuColumns());
	}, [isSkuType]);

	return { isSkuType, setIsSkuType, tabValue, setTabValue, columns, setColumns, defaultColumns, skuColumns, spuColumns };
};
